<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
<title>Spring Boot Demo</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png" />
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="./assets/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="./assets/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="./assets/AdminLTE/2.4.5/css/AdminLTE.min.css">
<!--[if lt IE 9]>
<script src="./assets/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="./assets/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<script src="./assets/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<style type="text/css">
html {
	font-family: "微软雅黑";
}

body {
	margin: 0;
	padding: 0;
	background: url(images/login_bg.jpg) no-repeat;
	overflow: hidden;
}

.login-wrapper .main-content-wrapper {
	position: absolute;
	width: 400px;
	height: 350px;
	top: 50%;
	left: 50%;
	margin-top: -250px;
	margin-left: -200px;
	z-index: 999;
	color: #fff;
}

.login-wrapper .main-content-wrapper .login-title-wrapper {
	font-size: 26px;
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 20px;
}

.login-wrapper .main-content-wrapper .login-from-wrapper {
	background: #fff;
	width: 100%;
	padding: 30px  60px 10px 60px;
	color: #444;
	border-bottom: 1px solid #d2d6de;
}

.login-wrapper .main-content-wrapper .login-message-wrapper {
	padding-top: 10px;
	background: #fff;
	color: #838383;
	padding-left: 60px;
	padding-right: 60px;
}

.login-wrapper .main-footer-wrapper {
	border-top: 1px solid #d2d6de;
	width: 100%;
	position: absolute;
	bottom: 0px;
	text-align: center;
	line-height: 40px;
	height: 40px;
	font-size: 12px;
	color: #8b8b8b;
	z-index: 999;
}
.error-message {
	height: 35px;
	line-height: 35px;
	color: #a94442;
}
.error-message .fa {
	padding-left : 5px;
	padding-right : 5px;
}
</style>

</head>
<body>
	<div class="login-wrapper">
		<div class="main-content-wrapper">
			<div class="login-title-wrapper">
				<span>Spring Boot Demo</span>
			</div>
			<div class="login-from-wrapper">
				<div class="row" style="padding-bottom: 20px; text-align: center;">
					<div class="col-xs-12">
						<span style="font-size: 18px; color:#3c8dbc;">电子证照信息平台统一登录</span>
					</div>
				</div>
				<div class="loginBoxArea">
					<div class="row">
						<div class="col-sm-12">
							<div class="form-group">
								<div class="input-group has-feedback">
									<span class="input-group-addon">用户名</span>
									<input type="type" class="form-control" id="username" name="username" placeholder="请输入用户名" />
									<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="form-group">
								<div class="input-group has-feedback">
									<span class="input-group-addon">密&emsp;码</span>
									<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" />
									<span class="glyphicon glyphicon-lock form-control-feedback"></span>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-xs-12">
							<div class="form-group">
								<button id="login-button" class="btn btn-block btn-primary btn-flat">登录</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-message-wrapper">
				<div class="row">
					<div class="col-sm-12">
						<div class="form-group login-message" style="height: 35px;">

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-footer-wrapper">
			Copyright © 2019 LineWell. All Rights Reserved. 南威软件 版权所有
		</div>
	</div>

	<script src="./assets/jquery/jquery-1.12.4.min.js"></script>
	<script src="./assets/es5/4.5.1/es5-shim.min.js"></script>
	<script src="./assets/es5/4.5.1/es5-sham.min.js"></script>
	<script src="./assets/json/json3.min.js"></script>
	<script src="./assets/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="./assets/AdminLTE/2.4.5/js/adminlte.min.js"></script>
	<script src="./assets/md5/md5.js"></script>

	<script>

		function login() {
			if ($("#username").val() == null || $("#password").val() == "") {
				$(".login-message").html('<div class="error-message"><i class="fa fa-close"></i>用户名密码不能为空，请填写！</div>');
				return;
			}

			$.ajax({
				url : "./api/auth/login",
				data : {
					username : $("#username").val(),
					password : hex_md5($("#password").val()),
				},
				type : "post",
				dataType : 'json',
				success : function(res) {
					if (res.head.code != "SUCCESS") {
						$(".login-message").html('<div class="error-message"><i class="fa fa-close"></i>'+res.head.message+'</div>');
						return;
					}
					var win = window;
					while (win != win.top) {
						win = win.top;
					}
					//将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
					win.location.href = res.data;
				}
			});
		}

		document.onkeydown = function(e) {
			var ev = document.all ? window.event : e;
			if (ev.keyCode == 13) {
				login();
			}
		}

		$('#login-button').click(function() {
			login();
		});
	</script>

</body>

</html>